<template>
<div style="height:100%">
  <div style="height:8%">
    <el-button type="primary" @click="openstting()" plain>新增配置</el-button>
    <el-dialog
      title="创建域名配置"
      :visible.sync="openButton"
      width="30%">
        <el-form label-width="80px">
          <el-form-item label="所属项目" prop="project_id">
                <el-select v-model="form.project_id" placeholder="请选择项目" @change="selectService(formProjectData.project_id)" filterable clearable>
                  <el-option v-for="item in projectList" :key="item.id" :label="item.project_name"
                    :value="item.id" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
          <el-form-item label="域名变量">
            <el-input v-model="form.case_mapping_name" placeholder="如：serverUrl" style="width: 150px"></el-input>
          </el-form-item>
          <el-form-item label="真实域名">
            <el-input v-model="form.case_path_url" placeholder="如:http://qa-sapi.xxx.com/"></el-input>
          </el-form-item>
          <el-form-item label="主户名称">
            <el-input v-model="form.tenant" placeholder="主户名称，如：xxx"></el-input>
          </el-form-item>
          <el-form-item label="执行关联" >
            <el-input v-model="form.relation" placeholder="请输入用来识别header字段,例如：COMM"></el-input>
          </el-form-item>
          <el-form-item label="Headers">
            <el-input v-model="form.header" placeholder="请输入headers"></el-input>
          </el-form-item>
          <el-form-item label="Email">
            <el-input type="textarea" v-model="form.email" placeholder="例:DY@163.com"></el-input>
          </el-form-item>
          
      </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addHost()">立即创建</el-button>
        <el-button @click="openButton = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
  <div style="height:80%">
    <el-table height='100%' :data="hostList" style="width: 100%" >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="Headers：">
              <span>{{ props.row.header || '空' }}</span>
            </el-form-item><br>
            <el-form-item label="邮箱：">
              <span>{{ props.row.email || '未配置邮箱地址' }}</span>
            </el-form-item><br>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        prop="project_name"
        label="所属项目">
      </el-table-column>
      <el-table-column
        prop="case_mapping_name"
        label="变量名">
      </el-table-column>
      <el-table-column
        prop="case_path_url"
        label="实际的HOST">
      </el-table-column>
        <el-table-column
        prop="relation"
        label="执行关联">
      </el-table-column>
        
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <i class="el-icon-edit"></i>&emsp;
          <i class="el-icon-delete" @click="urldelte(scope.row.id)"></i>
        </template>
      </el-table-column>
    </el-table>
  </div>
</div>
</template>
<style>
</style>
<script>
import app from "@/api/interface";

export default {
  data() {
    return {
      openButton: false,
      username: app.user,
      formProjectData: {
        project_id: "",
        project_name: "",
      },
      formServiceData: {
        person: "",
        service_id: "",
        service_name: "",
      },
      formVersionData: {
        version_id: "",
      },
      form: {
        project_id: "",
        relation: "",
        tenant: "",
        case_path_url: "",
        case_mapping_name: "",
        header: "",
        email: "",
      },
      rules: {
        personList: [
          {
            required: true,
            message: "请选择人员",
            trigger: "change",
          },
        ],
        service: [
          {
            required: true,
            message: "请选择服务",
            trigger: "change",
          },
        ],
        version: [
          {
            required: true,
            message: "请选择版本",
            trigger: "change",
          },
        ],
      },
      personList: [
        {
          person: "测试",
        },
        {
          person: "开发",
        },
      ],
      projectList: [],
      hostList: [],
    };
  },

  mounted() {
    this.selectProject();
    this.selectHost();
  },
  methods: {
    openstting() {
      (this.form = {}), (this.openButton = true);
    },
    // 查询项目
    selectProject() {
      this.formData = [];
      this.$axios.get("/selectProject/").then((res) => {
        if (res.status === 200) {
          this.projectList = res.data;
        }
      });
    },
    addHost() {
      this.$axios
        .post("/addHost/", {
          project_id: this.form.project_id,
          case_path_url: this.form.case_path_url,
          case_mapping_name: this.form.case_mapping_name,
          tenant: this.form.tenant,
          relation: this.form.relation,
          header: this.form.header,
          email: this.form.email,
        })
        .then((res) => {
          if (res.status === 200) {
            this.projectList = res.data;
            this.openButton = false;
            this.selectHost();
          }
        });
    },
    selectHost() {
      this.$axios.get("/select_host/").then((res) => {
        if (res.status === 200) {
          this.hostList = res.data;
        }
      });
    },
    urldelte(mid) {
      this.$axios
        .delete("/delete_url/", { params: { id: mid } })
        .then((res) => {
          if (res.data.code == 1) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.selectHost();
          } else {
            this.$message({
              message: "删除失败",
              type: "error",
            });
          }
        });
    },
  },
};
</script>

